<template>
    <el-row :gutter="20">
        <el-col :span="6" v-for="(item,index) in booklist">
            <el-card :body-style="{ padding: '0px' }" :shadow="hover">
                <img @click='detailUrl(item.id)' :src="item.image" class="image"></a>
                <div style="padding: 14px;">
                    <span><small>author:{{item.author}}</small></span>
                    <div class="bottom clearfix">
                    <span><small>date:{{item.add_time | mdate }}</small></span>
                    
                    </div>
                </div>
                </el-card>
        </el-col>  
        
        <el-col>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryinfo.pagenum"
                :page-sizes="[8, 16, 32, 64]"
                :page-size="queryinfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-col>
        
    </el-row> 
</template>

<script>
    export default{
        data() {
            return {
                booklist:[],
                activePath:'login/',
                queryinfo:{
                    pagenum:1,
                    pagesize:8
                },
                total:0,
                urls:'',
                detail:[],
                token:""
            }
        },
        created() {
            this.getData()
        },
        methods: {
            async getData(){
            const {data:res} = await this.$http.get('page/',{
                params:this.queryinfo
            })
                
                this.booklist = res.data
                this.total = res.total
                res.data.forEach(item => {
                    this.urls = `http://127.0.0.1:8001/api/v1/book/page-detail/${item.id}/`
                    this.detail.push(this.urls)
                })
                
                console.log(this.detail)
            },
           
            handleOpen(){

            },
            handleClose(){

            },
            toggleCollapse(){
                //点击按钮进行折叠和展开
                this.isCollapse = !this.isCollapse
            },
            login(){
                // this.loginDialogVisible = true
                this.$router.push('/login')  
            },
            handleSizeChange(newSize){
                console.log(newSize)
                this.queryinfo.pagesize = newSize
                this.getData()
            },
            handleCurrentChange(newPage){
                console.log(newPage)
                this.queryinfo.pagenum = newPage
                
                this.getData()
                
            },
            detailUrl(id){
                
                this.$router.push({path:'/detail',query:{id:id}})
            }
        },
    }
</script>

<style lang="less" scoped>
    .home-container{
    height: 100%;
}

.el-header{
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: black;
    font-size: 25px;
    height: 60px !important;
    padding-left: 40px;
    > div{
        display: flex;
        align-item:center;
        span{
            margin-left:10px;
        }
    }
    
    
    
}


.el-main{
    background-color: #F5F7FA;
}

.time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 80%;
    display: block;
    margin-left: 10%;
    margin-top: 8px;
    border-radius: 10px;
    height: 150px;
    cursor: pointer;
    text-decoration: none;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
  .el-aside{
    width: 142px ;
  }

  .el-card{
      width: 220px;
      height: 245px;
      margin: 20px;
  }
  .toggle-button{
    background-color: #4A5064;
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
}

.el-pagination{
    margin-left: 990px;
}

</style>
